<template>
  <div class="register">
    <h2 class="registerTitle">注册</h2>
    <!-- 表单 -->
    <el-form
      class="reForm"
      label-position="top"
      label-width="80px"
      :model="User"
      :rules="rules"
      hide-required-asterisk
    >
      <a href="javascript:;" class="goLogin" @click="goLogin"
        >登录<i class="iconfont">&#xe60d;</i></a
      >
      <el-form-item prop="email">
        <label class="lab"> 邮箱：</label>
        <el-input
          v-model="User.email"
          class="inp"
          type="email"
          required="required"
          placeholder="请输入qq邮箱"
          ref="email"
          @blur="judgeEmail"
        ></el-input>
      </el-form-item>

      <el-form-item label="" prop="account">
        <label class="lab"> 账号：</label>
        <el-input
          v-model="User.account"
          class="inp"
          placeholder="请输入账号"
          @blur="judgeAccount"
          ref="inpAccount"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="nickname">
        <label class="lab"> 昵称</label>
        <el-input
          v-model="User.nickname"
          class="inp"
          placeholder="请输入昵称"
          @blur="judgeUname"
          ref="inpName"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <label class="lab">密码：</label>
        <el-input
          class="inp"
          type="password"
          v-model="User.password"
          show-password
          placeholder="请输入密码"
          ref="pass"
          @blur="judgePass"
        ></el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <label class="lab" style="display: block"> 验证码：</label>
        <el-input
          v-model="User.captcha"
          class="inp"
          placeholder="请输入验证码"
          style="width: 60%"
        ></el-input>
        <el-button
          :type="btnType"
          :disabled="btnState"
          plain
          class="getCode"
          @click="getCaptcha"
          ref="CaptchaBtn1"
          >获取验证码{{ btnCount }}</el-button
        >
      </el-form-item>
      <!-- 注册 -->
      <div class="go">
        <el-button type="success" class="goRegister" @click="goRegister"
          >注册</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
  import { postRegister, postCaptcha } from '@/api/register.js';
  export default {
    name: 'Register',
    data() {
      return {
        User: {
          email: '',
          captcha: '',
          account: '',
          nickname: '',
          password: '',
        },
        rules: {
          email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
          captcha: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
          ],
          account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          nickname: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
        },
        // 验证码按钮状态
        btnType: 'primary',
        btnState: false,
        //  按钮计时器
        btnCount: null,
      };
    },
    methods: {
      goLogin() {
        this.$router.push('/login');
      },
      // 判断 邮箱是否合法
      judgeEmail() {
        const email = this.$refs.email.value;
        const rgEmail = /@qq.com/;
        if (email) {
          if (!rgEmail.test(email)) {
            this.$message({
              showClose: true,
              type: 'warning',
              message: '出错了哦，必须是qq邮箱！',
            });
          }
        }
      },
      // 判断账号 是否合法
      judgeAccount() {
        const account = this.$refs.inpAccount.value;
        const rgAccount = /^[a-zA-Z0-9]{6,16}$/;
        if (!rgAccount.test(account)) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，账号只能由6~16位数字和字母组成！',
          });
        }
      },
      // 判断 昵称是否合法
      judgeUname() {
        const uname = this.$refs.inpName.value;
        if (uname.length > 8) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，用户名只能3-8位！',
          });
        }
      },
      // 判断 密码 是否合法
      judgePass() {
        const pass = this.$refs.pass.value;
        if (pass.length < 8 || pass.length > 16) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，密码必须是8~16位！',
          });
        }
      },
      // 获取验证码
      getCaptcha() {
        postCaptcha('/captcha/getCaptcha', this.User.email).then(res => {
          if (res) {
            this.btnType = 'info';
            this.btnState = true;
            this.btnCount = 60;
            const timer = setInterval(() => {
              this.btnCount--;
              if (this.btnCount == -1) {
                clearInterval(timer);
                this.btnType = 'primary';
                this.btnState = false;
                this.btnCount = null;
              }
            }, 1000);
          }
        });
        //  修改按钮
      },
      // 提交注册
      goRegister() {
        alert(11);
        const email = this.$refs.email.value;
        const rgEmail = /@qq.com/;
        const account = this.$refs.inpAccount.value;
        const rgAccount = /^[a-zA-Z0-9]{6,16}$/;
        const uname = this.$refs.inpName.value;
        const pass = this.$refs.pass.value;
        if (email) {
          if (!rgEmail.test(email)) {
            this.$message({
              showClose: true,
              type: 'warning',
              message: '出错了哦，必须是qq邮箱！',
            });
          }
        } else if (!rgAccount.test(account)) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，账号只能由6~16位数字和字母组成！',
          });
        } else if (uname.length > 8) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，用户名只能3-8位！',
          });
        } else if (pass.length < 8 || pass.length > 16) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，密码必须是8~16位！',
          });
        } else {
          postRegister('/register', this.User).then(res => {
            // console.log(res, '183');
            if (res.data.code == 200) {
              const h = this.$createElement;
              this.$msgbox({
                title: '消息',
                message: h('p', null, [
                  h('span', null, '注册成功快去登录吧！ '),
                ]),
                showCancelButton: true,
                confirmButtonText: '快去登录',
                cancelButtonText: '逗留一会儿',
                beforeClose: (action, instance, done) => {
                  if (action === 'confirm') {
                    this.$router.push('/login');
                    done();
                  } else {
                    done();
                  }
                },
              });
            }
          });
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  @import url('../state/css/LoginRegister/register.less');
  .register h2[data-v-63ae9146] {
    margin-bottom: 5px;
    padding-top: 50px;
  }
  .registerCopywriting {
    padding-top: 30px;
    color: #fb6c28;
    font-size: 15px;
  }
</style>
